.show{
    animation:show-item 2s ease-in forwards;
}
.hide{
    animation:hide-item 2s ease-in forwards;/*需要保存最后一帧也就是100%最后的那个样式效果可以加上forwards*/
}

@keyframes show-item{
    0%{
        opacity:0;
        color:red;
    }
    50%{
        opacity:.5;
        color:green;
    }
    100%{
        opacity:1;
        color:blue;
    }
}

/*动画效果起名为hide-item*/
@keyframes hide-item {
    /*动画进行的百分比*/

    /*0%的时候的动画的样式是显示并且字体颜色为red*/
    0% {
        opacity:1;
        color:red;
    }
    /*50%的时候的动画的样式是显示并且字体颜色为green*/
    50%{
        opacity:.5;
        color:green;
    }
    100%{
        opacity:0;
        color:blue;
    }
}